<template>
  <div class="all">
    <div class="contain" v-for="item in array"    :key="item.id" @click="changeCategory(item.name)">
      <div class="block" :class="item.name==chosen?isActive:''">
        <div class="img">
        <img :src="item.src"/>
        </div>
        <div class="text">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      chosen:"学习",
      isActive:"isActive",
      array: [
        { id: 1, src: require("@/assets/read.png"), name: "学习" },
        { id: 2, src: require("@/assets/运动.png"), name: "运动" },
        { id: 3, src: require("@/assets/舞蹈.png"), name: "舞蹈" },
        { id: 4, src: require("@/assets/音乐.png"), name: "音乐" },
        { id: 5, src: require("@/assets/休闲.png"), name: "休闲" },
        { id: 6, src: require("@/assets/文艺.png"), name: "文艺" },
        { id: 7, src: require("@/assets/game.png"), name: "游戏" },
        { id: 8, src: require("@/assets/其他.png"), name: "其他" },
      ],
    };
  },
  methods:{
    changeCategory(res){
    this.$emit("changeCategory",res)
    this.chosen=res
    }
  }
};
</script>
<style scoped>
.all {
  height: 22%;
  width: 100%;
  display: flex;
  flex-wrap:wrap;
  background-color: white;
}
.isActive{
  background-color: rgb(245, 206, 235);
}
.contain {
  width: 25%;
  height: 50%;
}
.img{
height: 65%;
width: 100%;
text-align: center;
}
.text{
height: 35%;
widows: 100%;
text-align: center;
}
.img img{
width: 5vh;
height: 5vh;
position: relative;
top: 5%;
}
.block {
  position: relative;
  left: 10%;
  top: 10%;

  height: 80%;
  width: 80%;
  border-radius: 5px;
}
</style>
